<template>
    <view class="mask">
        <view @click.stop="onClick" class="content">
            <image style="width: 100%;height: 100%;" src="../../static/img/hb.png" @click="handleGetMoney" v-if="setp === 0" />
            <view class="content2" v-else>
                <view class="count2-top"></view>
                <view class="content2-content">
                    <text class="content2-label">恭喜发财，大吉大利</text>
                    <view class="content2-money">
                        <text class="money">{{ money }}</text>
                        <text>智汇币</text>
                    </view>
                    <text class="content2-label">进入用户主页即可领取红包</text>
                    <text class="content2-go" @click="handleToUser">立即前往</text>
                </view>
            </view>
            <view class="close" @click="close"><image style="width: 100%;height: 100%;" src="../../static/img/close.png" /></view>
        </view>
    </view>
</template>

<script>
import utils from '@/common/utils.js';

export default {
    data() {
        return {
            setp: 0,
            msg: '',
            fromId: '',
            money: 0,
            detailId: '',
            userInfo: {}
        };
    },

    onShow() {
        if (uni.getStorageSync('userInfo') != '') {
            let userInfo = this.$store.state.userInfo;
            this.userInfo = userInfo;
        }
    },

    onLoad(options) {
        this.msg = options.msg;
        uni.$on('websocket-message-process', res => {
            const { type, redPacketInfo, fromUserId, msg } = JSON.parse(res.data);

            if (type === 'getResultRedPacket' && msg === this.msg) {
                this.fromId = fromUserId;
                this.money = redPacketInfo.money || 0;
                this.detailId = redPacketInfo.detailId;

                if (this.money != 0) {
                    this.setp = 2;
                } else {
                    uni.showToast({
                        title: '红包已被抢完'
                    });

                    setTimeout(() => {
                        this.handleBack();
                    }, 1000);
                }
            }
        });
    },
    methods: {
        onClick(e) {
            // #ifdef APP-NVUE
            e.stopPropagation();
            // #endif
        },
        close() {
            if (this.setp === 2) {
                this.handleRes(2);
            }

            this.handleBack();
        },
        handleGetMoney() {
            if (!this.msg) {
                return;
            }
            this.$store.commit(
                'WEBSOCKET_SEND',
                JSON.stringify({
                    type: 'getRedPacket',
                    msg: this.msg,
                    fromUserId: this.userInfo.id
                })
            );
        },
        handleToUser() {
            this.handleRes(1);
            this.handleBack(`/pages/authorization/homepage?id=${this.fromId}`);
        },

        handleRes(number) {
            if (!this.detailId) {
                return;
            }

            this.$store.commit(
                'WEBSOCKET_SEND',
                JSON.stringify({
                    type: 'confirmRedPacket',
                    msg: this.msg,
                    fromUserId: this.userInfo.id,
                    redPacketInfo: {
                        confirmFlag: '' + number,
                        detailId: this.detailId
                    }
                })
            );
        },

        handleBack(url) {
            utils.handleHongbaoStatus('false');
            this.detailId = '';
            if (!url) {
                // const data = getCurrentPages().length;

                // if (data === 1) {
                //     uni.navigateTo({
                //         url: '/pages/tabBar/my'
                //     });

                //     return;
                // }

                uni.navigateBack();
                return;
            }

            uni.redirectTo({
                url
            });
        }
    }
};
</script>

<style>
page {
    background: transparent;
}

.mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.8);
}

.content {
    width: 300px;
    height: 400px;
    position: relative;
}

.content2 {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #efefef;
    position: relative;
    border-radius: 20px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

.content2-content {
    width: 100%;
    height: 280px;

    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
}

.count2-top {
    height: 300px;
    width: 400px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #d40000;
    border-radius: 45%;
    position: absolute;
    top: -50%;
}

.close {
    position: absolute;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    height: 40px;
    width: 40px;
}

.text {
    /* #ifndef APP-NVUE */
    display: block;
    /* #endif */
    line-height: 200px;
    text-align: center;
    color: #ffffff;
}

.content2-label {
    text-align: center;
    color: #a1a1a1;
}

.money {
    font-size: 35px;
    margin-right: 10px;
    color: #b3813a;
}

.content2-money {
    margin: 35px 0;
}

.content2-go {
    position: absolute;
    bottom: 20px;
    font-size: 20px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
}
</style>
